import React, { Component } from 'react'

export default class TitleInput extends Component {
    constructor(props) {
        super(props);

        this.state = {
            isFocus: false
        }
    }

    handleClick = () => {
        if (this.state.isFocus) {
            this.setState({
                isFocus: false
            });
            this.input.blur();
        } else {
            this.setState({
                isFocus: true
            });
            this.input.focus();
        }
    }

    handleFocus = () => {
        this.setState({
            isFocus: true
        });
    }

    handleBlur = () => {
        if (this.input.value) {
            this.props.saveTitle(this.input.value)
        } else {
            this.setState({
                isFocus: false
            });
        }

    }

    // 处理覆盖文字
    handleMouseDown = (event) => {
        event.preventDefault()
    }

    render() {
        return (
            <div style={{
                width: 1200,
                position: 'relative',
                left: '50%',
                marginLeft: -600,
                marginBottom: 50,
                marginTop: 50
            }}>
                <div
                    style={{
                        width: 100,
                        fontSize: 30,
                        textIndent: 40,
                        position: 'relative',
                        top: (this.state.isFocus ? -5 : 62),
                        transitionDuration: '.3s',
                        zIndex: 3,
                        cursor: 'auto'
                    }}
                    onMouseDown={(event) => this.handleMouseDown(event)}
                    onClick={this.handleClick}
                >
                    标题
                </div>
                <div style={{
                    width: 1200,
                    backgroundColor: '#000',
                    height: 2,
                    marginBottom: 10,
                    position: 'relative',
                    zIndex: 5
                }}></div>
                <input
                    type="text"
                    style={{
                        width: 1200,
                        outline: 0,
                        border: 0,
                        textIndent: 40,
                        height: 60,
                        fontSize: 30
                    }}
                    onFocus={this.handleFocus}
                    onBlur={this.handleBlur}
                    ref={(input) => this.input = input}
                />
                <div style={{
                    width: 1200,
                    backgroundColor: '#000',
                    height: 2,
                    marginTop: 10,
                    marginBottom: 40
                }}></div>
            </div>
        )
    }
}
